          <?php echo $this->Html->css('tabelas') . PHP_EOL; ?>
          <?php echo $this->Session->flash(); ?>
          <div class="row">
            <div class="span9">
              <form id="frmFiltro" action="" method="post"></form>
              <table id="tbl-caronas" class="tabela">
                <thead>
                  <tr>
                    <th class="col-id">#</th>
                    <th class="col-data"><i class="icon-calendar"></i> Data</th>
                    <th class="col-hora"><i class="icon-time"></i> Hora</th>
                    <th class="col-origem"><i class="icon-map-marker"></i> Origem</th>
                    <th class="col-destino"><i class="icon-flag"></i> Destino</th>
                    <th class="col-assentos"><i class="icon-star"></i> Assentos</th>
                  </tr>
                  <tr class="row-filters">
                    <td class="col-id"></td>
                    <td><input id="filtroData" name="filtroData" class="inputFiltro" type="date" form="frmFiltro"></td>
                    <td><input id="filtroHora" name="filtroHora" class="inputFiltro" type="time" form="frmFiltro"></td>
                    <td><input id="filtroOrigem" name="filtroOrigem" class="inputFiltro" type="text" form="frmFiltro"></td>
                    <td><input id="filtroDestino" name="filtroDestino" class="inputFiltro" type="text" form="frmFiltro"></td>
                    <td><input id="filtroAssentos" name="filtroAssentos" class="inputFiltro" type="number" form="frmFiltro"></td>
                  </tr>
                </thead>
                <tbody>
                  <tr linha-selecionada="false">
                    <td class="col-id">1</td>
                    <td class="col-data">16/03/2012</td>
                    <td class="col-hora">07:45</td>
                    <td class="col-origem">Nova Hartz</td>
                    <td class="col-destino">Taquara</td>
                    <td class="col-assentos">4</td>
                  </tr>
                  <tr linha-selecionada="false">
                    <td class="col-id">2</td>
                    <td class="col-data">16/03/2012</td>
                    <td class="col-hora">08:00</td>
                    <td class="col-origem">Parobé</td>
                    <td class="col-destino">Taquara</td>
                    <td class="col-assentos">3</td>
                  </tr>
                  <tr linha-selecionada="false">
                    <td class="col-id">3</td>
                    <td class="col-data">16/03/2012</td>
                    <td class="col-hora">08:30</td>
                    <td class="col-origem">Igrejinha</td>
                    <td class="col-destino">Taquara</td>
                    <td class="col-assentos">2</td>
                  </tr>
                </tbody>
                <tfoot>
                  <tr>
                    <th colspan="6">
                      <buttom id="btn-pedir-carona" class="btn btn-mini"><i class="icon-road"></i> Pedir Carona</buttom>
                    </th>
                  </tr>
                </tfoot>
              </table>
            </div>
          </div>
          <script type="text/javascript">
            // TODO: Considerar colocar esse plugin em um arquivo separado {{{
            (function($) {
              $.fn.unsignedIntegerEntry = function() {
                $(this).each(function() {
                  $(this).keydown(handleKey)
                         .keypress(handleKey)
                         .on("change", function(e) {
                           if (this.value.match(/[^0-9]/g)) {
                             this.value = "";
                           }
                         })
                         .on("input", function(e) {
                           $(this).trigger("change");
                         });
                  function handleKey(e) {
                    var key = e.which;
                    var type = e.handleObj.origType;
                    //
                    if (type == "keydown") {
                      if (key == 38 || key == 40) {
                        var value = parseInt(this.value);
                        if (isNaN(value)) {
                          value = 0;
                        }
                        if (key == 38) { // up
                          value++;
                        } else { // down
                          value--;
                        }
                        if (value < 0) {
                          value = 0;
                        }
                        this.value = value;
                      }
                    } else if (type == "keypress") {
                      var keychar = String.fromCharCode(key);
                      if (key != 0 && key != 8) {
                        if (keychar.match(/[^0-9]/)) {
                          e.preventDefault();
                        }
                      }
                    }
                  }
                });
              }
            })(jQuery);
            // }}}
            // Carregamento dinâmico de scripts em lote {{{
            var scripts = [];
            function carregarScripts(callback) {
              // Se todos os scripts foram carregados executa a função 'callback' {{{
              if (scripts == null || scripts.length == 0) {
                callback();
                return;
              }
              // }}}
              var script = scripts[0];
              scripts = scripts.slice(1);
              $.getScript(script, function() { carregarScripts(callback); });
            }
            // }}}
            // TODO: Criar um plugin para aplicar automaticamente pela seleção de uma classe ou atributo, os plugins necessários nos campos em que o
            // navegador não oferece suporte para o inputtype. Isso inclui o carregamento dinâmico de folhas de estilo e scripts necessários pelos
            // plugins aplicados. {{{
            // Testa o suporte a <input type="date">
            if (Modernizr['inputtypes']['date'] !== true) {
              scripts.push('<?php echo $this->Html->webroot('js/jquery.dateentry.min.js'); ?>');
              scripts.push('<?php echo $this->Html->webroot('js/jquery.dateentry-pt.js'); ?>');
            }
            // Testa o suporte a <input type="time">
            if (Modernizr['inputtypes']['time'] !== true) {
              scripts.push('<?php echo $this->Html->webroot('js/jquery.timeentry.min.js'); ?>');
              scripts.push('<?php echo $this->Html->webroot('js/jquery.timeentry-pt.js'); ?>');
            }
            //
            carregarScripts(function() {
              if ($.dateEntry) {
                $('input[type="date"]').dateEntry({spinnerImage: ''});//.datepick({renderer: $.datepick.themeRollerRenderer});
              }
              if ($.timeEntry) {
                $('input[type="time"]').timeEntry({spinnerImage: ''});
              }
            });
            // Testa o suporte a <input type="number">
            if (Modernizr['inputtypes']['number'] !== true) {
              $('#filtroAssentos').unsignedIntegerEntry();
              if ($.browser.msie) {
                $('#filtroAssentos').on("paste", function(e) { // Evento "onpaste" não suportado pelo navegador Opera.
                  e.preventDefault();
                });
              }
            }
            // }}}
            // Selecionar uma linha da tabela {{{
            $('table tbody tr').each(function() {
              $(this).click(function(e) {
                if ($(this).hasClass('row-highlighting')) {
                  $(this).removeClass('row-highlighting')
                         .attr("linha-selecionada", "false");
                } else {
                  $(this).closest('table#tbl-caronas')
                         .children('tbody')
                         .children('tr.row-highlighting')
                         .removeClass('row-highlighting')
                         .attr("linha-selecionada", "false");
                  $(this).addClass('row-highlighting')
                         .attr("linha-selecionada", "true");
                }
                //console.log($(this).closest('table'));
              });
            });
            // }}}
            $("#btn-pedir-carona").click(function(e) {
              var linhaSelecionada = $('table#tbl-caronas tbody tr.row-highlighting');
              if (linhaSelecionada !== null && linhaSelecionada.length > 0) {
                linhaSelecionada = linhaSelecionada[0];
                var id = $(linhaSelecionada).children('td.col-id').text();
                console.log(id);
              } else {
                alert("Selecione uma carona primeiro!");
              }
            });
          </script>